
// window.onload = async function () {
//   const res = await axios({
//     url: "/dashboard",
//     method: "get",
//     // 额外的设置请求头
//     // 把登录之后的token 带到服务器
//     // 接口/后端去校验 token是否正确
//     //以下步骤可以用axios的拦截器完成，因为很多地方都要增加header带token啥的，所以要写在common样式里
//     // headers: {
//     //   // msg这个值 只是用来的测试的 没有任何意义
//     //   //   msg: "good good study day day up",
//     //   // 缓存中获取 token
//     //   Authorization: localStorage.getItem("token"),
//     // },
//   });
//   console.log("res:", res);
// };

const renderIndex =async function () {
  const { data: res } = await axios.get('/dashboard')
  console.log(res);
  const { overview,year,salaryData,groupData,provinceData} = res
  for (let k in overview) {
    document.querySelector(`[name=${k}]`).innerHTML = overview[k]
  }
  getLineyear(year)
  getPie(salaryData)
  setTame(groupData)
  getTwoPie(salaryData)
  renderMap(provinceData)
}

renderIndex()

//渲染折现图
const getLineyear = function (data) {
const line=document.querySelector('#line')
let myChart = echarts.init(line);
let option;

option = {
  title: {
    text: 'hc牛逼',
    top: '5%',
    left: '5%',
    textStyle: {
      fontSize: 25
    }
  },
  xAxis: {
    axisLabel: {
      color: '#999'
    },
    type: 'category',
    data: data.map(item=>item.month),
    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ccc'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    top: '20%'
  },
  color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: '#499FEE' // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#5D75F0' // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  series: [
    {
      data: data.map(item=>item.salary),
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 6
      },
      symbolSize: 10,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE'
            },
            {
              offset: 0.8,
              color: 'rgba(255,255,255,0.2)'
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0)'
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
};

option && myChart.setOption(option);
}

//渲染饼图
const getPie = function (data) {
  const pie = document.querySelector('#pie')
  let myChart = echarts.init(pie);
let option;

  const renderData = data.map(item => {
    return {
      value: item.g_count + item.b_count,
      name:item.label
    }
  })
option = {
  title: {
    text: '班级平均薪资',
    top: 15,
    left: 10,
    textStyle: {
      fontSize: 16
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '6%',
    left: 'center'
  },
  color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
  series: [
    {
      name: '班级平均薪资',
      type: 'pie',
      radius: ['50%', '64%'],
      center: ['50%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data:renderData
    }
  ]
};
option && myChart.setOption(option);
}

//柱状图
const setTame = function (data) {
  const bar = document.querySelector('#lines')
  let myChart = echarts.init(bar);

 //方法一
  // const btns = document.querySelectorAll('#btns [type="button"]')
  // btns.forEach((item,index) => {
  //   item.addEventListener('click', function () {
  //     document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
  //     item.classList.add('btn-blue')
  //     renderData(index+1)
  //   })

  // })

  // const renderData = function (i) {
   let option;
option = {
  grid: {
    left: 70,
    top: 30,
    right: 30,
    bottom: 50
  },
  xAxis: {
    type: 'category',
    data: data[1].map(item=>item.name),
    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ccc'
      }
    },
    axisLabel: {
      color: '#999'
    }
  },

  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    },
    type: 'value'
  },
  tooltip:{
    trigger:'axis'
  },
  color:[{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: '#34D39A' // 0% 处的颜色
  }, {
      offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
  }],
  global: false // 缺省为 false
},{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: '#499FEE' // 0% 处的颜色
  }, {
      offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}],
  series: [
    {
      data: data[1].map(item=>item.hope_salary),
      type: 'bar'
    },
        {
      data: data[1].map(item=>item.salary),
      type: 'bar'
    }
  ]
  };
    //方法2，用事件委托来做
  const btns = document.querySelector('#btns')
  btns.addEventListener('click', function (e) {
    if (e.target.tagName === 'BUTTON') {
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      let k = e.target.innerText
      option.xAxis.data = data[k].map(item => item.name)
      option.series[0].data = data[k].map(item => item.hope_salary)
      option.series[1].data = data[k].map(item => item.salary)
      option && myChart.setOption(option);
    }
  })

    option && myChart.setOption(option);
  // }

  // renderData(1)



  


}

//双饼状图
const getTwoPie = function (data) {
  console.log(data);
  const gender = document.querySelector('#gender')
  let myChart = echarts.init(gender);
  let option;
  const girlData = data.map(item => {
    return {value:item.b_count,name:item.label}
  })
  console.log(girlData);
  const boyData = data.map(item => {
    return {value:item.g_count,name:item.label}
  })
option = {
  title: [
    {
      text: '男女薪资分布',
      top: '8%'
    },
    {
      text: '男生',
      top: '46%',
      left: '43%'
    },
    {
      text: '女生',
      top: '78%',
      left: '43%'
    }
  ],
  tooltip: {
    trigger: 'item'
  },
  color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['15%', '30%'],
      center: ['50%', '33%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside'
      },
      labelLine: {
        show: true
      },
      data: girlData
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['15%', '30%'],
      center: ['50%', '65%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside'
      },

      labelLine: {
        show: true
      },
      data: boyData
    }
  ]
};

option && myChart.setOption(option);
}

//地图
const renderMap = function (data) {
//  console.log(data);
  
//方法一：
// const newData=data.map(item => {
//     let k = item.name.indexOf('省')
//     let n=item.name.indexOf('自治区')
//     if (k !== -1) { item.name = item.name.substring(0, k) }
//     if (n !== -1) { item.name = item.name.substring(0, n) }
//     if(item.name.length>3){item.name=item.name.substring(0, 2) }
//     return {name:item.name,value:item.value}
// })
  

 
  const map = document.querySelector('#map')
  const myEchart = echarts.init(document.querySelector('#map'))
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]

//方法2：
  const newData= dataList.map(item => {
    data.forEach(item1 => {
      if(item1.name.includes(item.name,0)){item.value=item1.value}
    })
    return{name:item.name,value:item.value}
  })



  let option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: newData,
      },
    ],
  }

  myEchart.setOption(option)
}